import React, { Component } from 'react';
import { hot_list } from "../../../api/index";
import '../../../styles/index/home/List.scss'
import { Footer } from 'antd-mobile'
import { withRouter } from 'react-router-dom';

class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: []
    }
  }
  async componentDidMount() {
    var res = await hot_list()
    // console.log(this.state.list);
    this.setState({ list: res.data })
  }
  go(item) {
    // console.log(item.id);
    this.props.history.push({ pathname: '/good', state: { id: item.id } })
  }
  render() {
    return (
      <div className="q5">
        <Footer label='热销商品'></Footer>
        <div className='list11'>
          {
            this.state.list.map((item, index) => {
              return (
                < figure className='item11' onClick={() => { this.go(item) }} key={index} >
                  <figcaption>
                    <img src={item.pic} alt="" />
                  </figcaption>
                  <p className='p1'>{item.name}</p>
                  <p className='p2'>{item.introduce}</p>
                  <p className='p3'>{item.price}</p>
                </figure>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default withRouter(List);